<template>
<h2>列表</h2>
<input type="button" value="add" @click="btnAdd">
<table>
    
    <thead>
        <tr>
            <th>Id</th>
            <th>dai</th>
            <th>zz</th>
            <th>cz</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in bookList " key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.bookName }}</td>
            <td>{{ item.author }}</td>
            <td>
                <input type="button" value="edit" @click="btnEdit(item.id)">
                <input type="button" value="del" @click="btnDel(item.id)">
            </td>
        </tr>
    </tbody>
</table>
</template>

<script setup>
import { delBook, getAll } from '@/api/bookApi';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

//拿到路由实例
let router = useRouter
//响应式数据开始
let bookList =ref([])
//结束
//function start
function btnAdd(){
    router.push('/bookAdd')
}
function btnDel(id){
    if(confirm('right?')){
        delBook(id)
        //移除页面上数据
        let idx = bookList.value.findIndex(item =>item.id ==id)
        console.log(idx);
        bookList.value.splice(idx,1)
    }
}
function btnEdit(id){
    router.push(`/bookEdit/${id}`)
}
function btnFind(){
    console.log('111');
    
}
onMounted(async()=>{
    let res = await getAll();
    bookList.value=res.data
})
</script>